<template>
  <!-- <div class="serviceGuide-content"> -->

<!--      <div class="col-md-9">
        <div class="" style="font-size: 25px;">常见问题解答</div>
          <div class="line_x"></div>
          <div class="ft12 ft-grey9">
            <span class="pull-left">2016-05-19 09:13</span>
              <span class="pull-right" style="float: right;font-size: 13px;" ><a href="#" class="link_t" style="text-decoration: none;color: #2C3E50;">T+</a>&nbsp;&nbsp;<a href="#" class="link_t"  style="text-decoration: none;color: #2C3E50;">T-</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#" style="text-decoration: none;color: #2C3E50;">打印</a>&nbsp;&nbsp;<a href="#"  style="text-decoration: none;color: #2C3E50;">关闭</a></span>
          </div>
          <p class="clearfix"></p>
          <div style="padding-left:50px; padding-right:50px;">
              <p class="height30" v-for="(item,index) in GetGuidance"></p>
              <p><b>{{index}}.{{item.guidancetitle}}？</b></p>
              <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;答：{{item.guidancecontent}}。 </p>
              <p>&nbsp;</p>
          </div>
      </div>
      <div style="height: 300px;" class="guide"> -->

<!--        <el-steps direction="vertical" :active="1">
          <el-step title="常见问题解答"><a></a></el-step>
          <el-step title="维修范围划分"></el-step>
          <el-step title="不属后勤维修范围"></el-step>
        </el-steps> -->
<!--        <el-col :span="4">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose">
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-loading"></i>
                  <span>常见问题解答</span>
                </template>
              </el-submenu>
              <el-menu-item index="2">
                <i class="el-icon-loading"></i>
                <span slot="title">维修范围划分</span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-loading"></i>
                <span slot="title">不属后勤维修范围</span>
              </el-menu-item>
            </el-menu>
          </el-col>
      </div>
  </div> -->
<el-container style="background-color:aliceblue;">
  <el-header style="height: 100%;padding: 0;background-color: aliceblue;">
    <div style="background-color: cornflowerblue;height: 40px;">
      <el-col :span="8"><div class="index-title" style="line-height: 40px;color: white;">
        <router-link style="margin-right: 30px;color: white" :to="'/index'">数字后勤服务大厅</router-link>
        <a>运架中心</a>
        <a>服务监督</a>
      </div></el-col>
      <el-col :span="8"  style="line-height: 40px;color: white;"><div class="index-title"><a>膳食中心</a></div></el-col>
      <el-col :span="8">
        <div style="line-height: 40px;color: white;">
         <router-link style="margin-right: 30px;text-decoration: none;color: white;" :to="'/PersonalCenter'">{{user.accountName}}</router-link>
        </div>
        <div style="line-height: 40px;color: white;">
         <a href="javascript:void(0)" @click="logout()" style="position: absolute;top: 0px;margin-left: 300px;text-decoration: none;color: white;">退出登录</a>
        </div>
      </el-col>
    </div>

      <el-col :span="18"><div style="margin-top: 20px;"><img src="../../static/img/logo-repair.png"/></div></el-col>
            <el-col :span="6">
              <div class="index-repair-home" @click="jumpTo('/index')">
                <div class="index-menu-box">
                  <!-- style="display: none; -->
                  <div class="index-box-text">
                    首页<br />
                    <span>Home</span>
                  </div>
                  <div class="index-menu-logo">
                    <img src="../../static/img/icon-home.png"/>
                  </div>
                </div>
              </div>

              <div class="index-repair-notice" @click="jumpTo('/notice')">
                  <div class="index-menu-box">
                    <div class="index-box-text">
                      通知<br />
                      <span>notice</span>
                    </div>
                  <div class="index-menu-logo">
                    <img src="../../static/img/icon-notice.png"/>
                  </div>
                </div>
              </div>

              <div class="index-repair-service" @click="jumpTo('/serviceGuide')">
                <div class="index-menu-box">
                  <div class="index-box-text">
                    服务帮助<br />
                    <span>help</span>
                  </div>
                  <div class="index-menu-logo">
                    <img src="../../static/img/icon-notice.png"/>
                  </div>
                </div>
              </div>
              </div>
              </el-col>
    <el-button v-if="role.isStudent" type="success" icon="el-icon-s-cooperation" style="float: right;margin-right: 60px;">我要报修</el-button>
  </el-header>
  <el-container>

    <el-aside width="200px">
      <div style="width: 155px;height: 40px;background-color: #0280c8;margin-left: 10px;margin-bottom: 16px;border-radius: 5px;">
        <div style="background-image: url(../../static/img/icon10.png);width: 27px;height: 27px;float: left;margin-left: 7px;margin-top: 8px;"></div>
        <div style="float: right;margin: 0 auto;line-height: 40px;margin-right: 33px;color: #fff;">服务指南</div>
      </div>
      <el-col :span="4">
                  <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    @select="getIndex" v-for="(item,num) in LargesHeadline" :key="num">
                    <el-menu-item :index="num+1">
                      <i class="el-icon-loading"></i>
                      <span slot="title">{{item.guidanceName}}</span>
                    </el-menu-item>
                   <!-- <el-menu-item index="2">
                      <i class="el-icon-loading"></i>
                      <span slot="title">维修范围划分</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                      <i class="el-icon-loading"></i>
                      <span slot="title">不属后勤维修范围</span>
                    </el-menu-item> -->
                  </el-menu>
                </el-col>
    </el-aside>
    <el-main style="margin-top: -25px;">
     <div class="col-md-9">
        <div class="" style="font-size: 25px;">{{title}}</div>
          <div class="line_x"></div>
          <div class="ft12 ft-grey9">
            <span class="pull-left">2016-05-19 09:13</span>
              <span class="pull-right" style="float: right;font-size: 13px;" ><a href="#" class="link_t" style="text-decoration: none;color: #2C3E50;">T+</a>&nbsp;&nbsp;<a href="#" class="link_t"  style="text-decoration: none;color: #2C3E50;">T-</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#" style="text-decoration: none;color: #2C3E50;">打印</a>&nbsp;&nbsp;<a href="#"  style="text-decoration: none;color: #2C3E50;">关闭</a></span>
          </div>
          <p class="clearfix"></p>
          <div style="padding-left:50px; padding-right:50px;">
            <span  v-for="(item,index) in GetGuidance">
              <p class="height30"></p>
              <p><b>{{index+1}}.{{item.guidancetitle}}</b></p>
              <span style="white-space:pre-wrap;" v-html="item.guidancecontent">{{item.guidancecontent}}</span>
              <p>&nbsp;</p>
            </span>
          </div>
          <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="this.current"
                :page-sizes="[1,5,10]"
                :page-size="this.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="this.total">
              </el-pagination>
      </div>
    </el-main>
  </el-container>
</el-container>

</template>

<script>
  export default{
    name:"ServiceGuide",
    data(){
    	return{
        user:JSON.parse(localStorage.getItem("user")).data,
        LargesHeadline:[],//大标题
        GetGuidance:[],
        tabPosition: 'left',
        title:"",
        getGuidanceForm:{
          guidanceId:"",
          pageNum:"",
          pageSize:""
        },
        total:"",
        current: "",
        pageSize: "",
        index:"",
        role:{
          isStudent: JSON.parse(localStorage.getItem("user")).data.state == 2 ? true : false,
          isManager: JSON.parse(localStorage.getItem("user")).data.state == 0 ? true : false,
          isRepairer: JSON.parse(localStorage.getItem("user")).data.state == 1 ? true : false
        }
    	}
    },
    methods:{
      logout(){
      	this.$http.get("/logout")
        localStorage.removeItem("user")
        location.reload()
      },
      jumpTo(route){
        this.$router.push(route)
      },
      //获取大标题ID
      getIndex(key){
        this.index=key;
        this.getServiceGuide()
      },
      getServiceGuide(pageNum,pageSize){
        if(this.index==1){
          this.title="常见问题解答"
        }else if(this.index==2){
          this.title="维修范围划分"
        }else if(this.index==3){
          this.title="不属后勤维修范围"
        }
        this.getGuidanceForm.guidanceId=this.index
        this.getGuidanceForm.pageNum=pageNum
        this.getGuidanceForm.pageSize=pageSize
        console.log(this.getGuidanceForm)
        this.$http.post("/repairGuidance2/getGuidance",this.getGuidanceForm).then(resp=>{
          console.log(resp)
        	if(resp.data.code==200){
            this.GetGuidance=resp.data.data.records
            this.total=resp.data.data.total
            this.pageSize=resp.data.data.size
            this.current=resp.data.data.current
          }
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
          this.getServiceGuide(this.current,val)
      },
      //分页-改变页数
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
          this.getServiceGuide(val,this.pageSize)
      },
      getLargesHeadline(){
        this.$http.get("/repairGuidance2/getLargesHeadline").then(resp=>{
          console.log(resp)
        	if(resp.data.code==200){
            this.LargesHeadline=resp.data.data
          }
        })
      }
    },
    created() {
      this.getServiceGuide()
      this.getLargesHeadline()
    }
  }
</script>

<style>
 .serviceGuide-content{
    width: 70%;
    float: right;
    background-image: url(../../static/img/repair-bg.png);
  }
  .guide{
    position: absolute;
    left: 160px;
    top: 0px;
  }

</style>
